<template>
    <div style="width: 100%;height: 100vh;background-color: aqua;overflow:hidden ">
        <div style="width: 400px;margin: 150px auto">
            <div style="color: brown;font-size: 30px; text-align: center; padding: 30px 0">登录后台管理系统</div>
            <el-form ref="form" :model="form" size="normal">
                <el-form-item>
                    <el-input prefix-icon="el-icon-user-solid" v-model="form.username" placeholder="用户名" clearable><i class="el-icon-user"></i></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input prefix-icon="Lock" v-model="form.password" placeholder="密码" show-password></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button style="width: 100% " type="primary" @click="login">登 录</el-button>
                </el-form-item>
            </el-form>
        </div>

    </div>
</template>

<script>
    import {ArrowDown} from "@element-plus/icons-vue"
    import request from "../utils/request";
    export default {
        name: "Login",
        components:{
            ArrowDown
        },
        data(){
            return{
                form:{

                }
            }
        },
        methods:{
            login(){
              request.post("http://localhost:9090/user/login",this.form).then(res => {
                  if (res.code === '0'){
                      this.$message({
                          type:"success",
                          message:"登录成功",
                      })
                      this.$router.push("/home")    //登录成功后跳转至相应的界面
                  } else {
                      this.$message({
                          type:"error",
                          message: res.msg
                      })
                  }
              })
            }
        }
    }
</script>

<style scoped>

</style>